<template>
    <el-container class="cloud-ui">
        <el-header class="cloud-header">
            <el-menu default-active="1" class="el-menu-demo" mode="horizontal" background-color="#545c64" text-color="#fff" active-text-color="#ffd04b">
                <el-menu-item disabled>CLOUD编译器</el-menu-item>
                <el-submenu index="1">
                    <template slot="title">页面</template>
                    <el-menu-item index="1-1" v-dialog data-type="newpage">新建页面</el-menu-item>
                    <el-menu-item index="1-2" v-dialog data-type="newcomponent">新建组件</el-menu-item>
                    <el-menu-item index="1-3" v-dialog data-type="openfile">打开</el-menu-item>
                    <el-menu-item index="save" @click="handleSave">保存</el-menu-item>
                </el-submenu>
                <el-submenu index="2">
                    <template slot="title">模型</template>
                    <el-menu-item index="2-1" v-dialog="main.resources[0]" data-type="create">新建模型</el-menu-item>
                    <el-menu-item index="2-2" v-ipopup.model="models">导入模型</el-menu-item>
                </el-submenu>
                <el-submenu index="3">
                    <template slot="title">数据集</template>
                    <el-menu-item index="3-1">设置参数</el-menu-item>
                    <el-menu-item index="3-2">页面参数</el-menu-item>
                    <el-menu-item index="3-3" v-ipopup.gather="gather">导入数集</el-menu-item>
                </el-submenu>
                <el-submenu index="4">
                    <template slot="title">事件</template>
                    <el-menu-item index="4-1" v-ipopup.action="action">新建事件</el-menu-item>
                </el-submenu>
                <el-submenu index="5">
                    <template slot="title">帮助</template>
                    <el-menu-item index="5-1">操作文档</el-menu-item>
                    <el-menu-item index="5-2">关于我们</el-menu-item>
                    <el-menu-item index="5-3">BUG提交</el-menu-item>
                </el-submenu>
            </el-menu>
        </el-header>
        <el-container class="cloud-mian">
            <el-aside width="288px" class="cloud-column">
                <el-tabs value="0" type="border-card" class="cloud-panel" style="height: 40%; ">
                    <el-tab-pane :label="item.title" :name="String(index)" v-for="(item,index) in main.resources" :key="index">
                        <el-scrollbar ref="cloud-scrollbar" :native="false" :noresize="false">
                            <component :is="item.components" v-model="item.data"></component>
                        </el-scrollbar>
                    </el-tab-pane>
                </el-tabs>
                <el-tabs value="basics" type="border-card" class="cloud-panel" style="height: 60%; ">
                    <el-tab-pane :label="item.title" :name="String(index)" v-for="(item,index) in main.controls" :key="index">
                        <el-scrollbar ref="cloud-scrollbar" :native="false" :noresize="false">
                            <component :is="item.components" v-model="item.data"></component>
                        </el-scrollbar>
                    </el-tab-pane>
                </el-tabs>
            </el-aside>
            <el-main class="cloud-body">
                <el-scrollbar ref="cloud-scrollbar" :native="false" :noresize="false">
                    <div class="cloud-canvas">
                        <component :is="config.components" v-model="config"></component>
                        {{config}}
                    </div>
                </el-scrollbar>
            </el-main>
            <el-aside width="330px" class="cloud-column">
                <el-tabs value="0" type="border-card" class="cloud-panel" style="height: 30%;">
                    <el-tab-pane :label="item.title" :name="String(index)" v-for="(item,index) in main.libraries" :key="index">
                        <el-scrollbar ref="cloud-scrollbar" :native="false" :noresize="false">
                            <component :is="item.components" v-model="item.data"></component>
                        </el-scrollbar>
                    </el-tab-pane>
                </el-tabs>
                <el-tabs value="0" type="border-card" class="cloud-panel" style="height: 40%; ">
                    <el-tab-pane :label="item.title" :name="String(index)" v-for="(item,index) in main.attributes" :key="index">
                        <el-scrollbar ref="cloud-scrollbar" :native="false" :noresize="false">
                            <component :is="item.components" v-model="item.data"></component>
                        </el-scrollbar>
                    </el-tab-pane>
                </el-tabs>
                <el-tabs value="0" type="border-card" class="cloud-panel" style="height: 30%; ">
                    <el-tab-pane :label="item.title" :name="String(index)" v-for="(item,index) in main.layers" :key="index">
                        <el-scrollbar ref="cloud-scrollbar" :native="false" :noresize="false">
                            <component :is="item.components" v-model="item.data"></component>
                        </el-scrollbar>
                    </el-tab-pane>
                </el-tabs>
            </el-aside>
        </el-container>
    </el-container>
</template>
<script type="text/javascript">
import Vue from 'vue'
//通过命名空间的方式映入
import { createNamespacedHelpers } from 'vuex'
//获取需要管理的方法
const { mapState, mapActions, mapGetters, mapMutations } = createNamespacedHelpers('cloud')

import main from './utils/main'

import widgets from './widgets'

import canvas from './widgets/basics/canvas/index.js'

import { directives } from './dragdrop';

import utilsDirectives from './utils/directives'

import dialog from './directives'

import { forward, reverse, deepCopy } from './utils'

//组件用
Vue.directive("dialog", dialog["dialog"]);
Vue.directive("menu", dialog['menu']);
//画布用
Vue.directive("iwidget", directives["iwidget"]);
Vue.directive("icanva", directives["icanva"]);
Vue.directive("iedit", directives["iedit"]);
Vue.directive("icolumn", directives["icolumn"]);
Vue.directive("ilabel", directives["ilabel"]);

import Contextmenu from "./plugins/context-menu";
Vue.use(Contextmenu);

export default {
    components: {
        //empty
    },
    data() {
        return {

        }
    },
    /**
     * 计算属性
     * @type {Object}
     */
    computed: {
        ...mapState(['main', 'config']),
        ...mapGetters(['models', 'gather', 'action'])
    },
    /**
     * 数据监听
     * @type {Object}
     */
    watch: {

    },
    /**
     * 页面加载执行
     * @return {[type]} [description]
     */
    async mounted() {

        if (Object.keys(this.config).length === 0) {
            this.$message('请先新建页面,点击文件->新建');
        }
        await this.setMain(main);
        await this.setAttributes([{
            title: "属性管理",
            components: () => import('@/cloud/column/layers.vue'),
            data: {

            }
        }])
        await this.setControlsData(widgets)
        //设置资源管理器--页面数据
        await this.$cloud.get('build/page_all').then(response => {
            console.log('page_all', response)
            this.setResourcesData({
                name: "pages",
                data: response
            })
        })
        //设置资源管理器--模型数据
        await this.$cloud.get('build/component_all').then(response => {
            this.setResourcesData({
                name: "components",
                data: response
            })
        })
        //设置资源管理器--模型数据
        await this.$cloud.get('build/all').then(response => {
            this.setResourcesData({
                name: "models",
                data: response
            })
        })
    },
    /**
     * 页面方法
     * @type {Object}
     */
    methods: {
        ...mapActions(['setAttributes', 'setControls', 'setMain', 'setControlsData', 'setPage', 'setResourcesData']),
        /**
         * 操作数据保存
         * @return {[type]} [description]
         */
        async handleSave() {
            let data = await forward({
                "config": this.config,
                "main": this.main
            });
            this.$cloud.post("build/page_save", data).then(response => {
                console.log("保存成功", response);
            }).catch(error => {
                console.log(error);
            });
        },

    }
}
</script>
<style lang="scss">
@import "./style.scss";
</style>